<template>
  <div class="search-channel-container">
    <div class="main" v-if="isShowSearch">
      <div class="left">
        <div
          class="item"
          v-for="item in searchList"
          :class="{
            active: item.code === currentSearcyType,
          }"
          @click="currentSearcyType = item.code"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <el-tabs @tab-change="handleSwitch" v-model="currentTab" type="border-card">
          <el-tab-pane name="name" label="名字"></el-tab-pane>
          <el-tab-pane name="chipCode" label="芯片"></el-tab-pane>
          <el-tab-pane name="host" label="主人"></el-tab-pane>
          <CatSearch :desc="desc" @submit="handleSubmit" />
        </el-tabs>
      </div>
    </div>
    <div v-else style="margin: 5px 0; text-align: center" class="catteryTitle">
      <span style="font-weight: 400">{{ route.query.petType }}</span
      >：
      <span style="font-weight: 200">{{ route.query.catteryName }}</span>

      <div>
        <el-image
          class="catteryImg"
          :src="url"
          :initial-index="4"
          fit="cover"
          v-for="url in imgUrls"
          :preview-src-list="imgUrls"
        />
      </div>
    </div>

    <div class="content" v-loading="isLoading">
      <CatList :cats="catList" @click="handleCatClick" />
    </div>

    <el-dialog v-model="dialogVisible" width="60%" :close-on-click-modal="true" :fullscreen="columnNumRef === 1">
      <CatDetail v-if="dialogVisible" :columnNum="columnNumRef" :cat="currentCat" style="position: relative" />

      <template #footer>
        <el-button class="close-btn" type="warning" @click="dialogVisible = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElTabs, ElTabPane, ElDialog, vLoading, ElButton, ElImage } from "element-plus";
import { ref, onMounted, computed } from "vue";
import CatSearch from "./components/CatSearch.vue";
import { getCatApi } from "@/api/SearchChannel/catApi";
import CatDetail from "@/components/CatDetail/index.vue";
import CatList from "./components/CatList.vue";
import { useRoute } from "vue-router";

const isShowSearch = ref(true);
const route = useRoute();

const searchList = ref([
  {
    name: "猫猫查询",
    code: "cat",
  },
  {
    name: "狗狗查询",
    code: "dog",
  },
]);

const currentTab: any = ref<any>("name");
const currentSearcyType: any = ref("cat");

if (route.query.type) {
  currentSearcyType.value = route.query.type;
}

const nameDesc = computed(() => (currentSearcyType.value === "cat" ? "请输入猫猫名字" : "请输入狗狗名字"));

const descMap: any = {
  name: nameDesc,
  chipCode: "请输入芯片",
  homeName: "请输入猫舍",
  host: "请输入主人名字",
};

const desc: any = computed(() => descMap[currentTab.value]);
const catList = ref<any>([]);

const isLoading = ref(false);
let isFirstSearch = ref(true);
async function handleSubmit(data: any) {
  try {
    isLoading.value = true;
    const cats = await getCatApi({
      [currentTab.value]: data.value.value,
      petType: currentSearcyType.value === "cat" ? "1" : "2",
    });
    catList.value = cats.map((item: any) => ({ ...item, sex: item.sex === "1" ? "公" : "母" }));

    isFirstSearch.value = false;
  } finally {
    isLoading.value = false;
  }
}

function handleSwitch() {
  desc.value = descMap[currentTab.value];
}

const dialogVisible = ref(false);
const currentCat = ref({});
function handleCatClick(cat: any) {
  dialogVisible.value = true;
  currentCat.value = cat;
}

const columnNumRef = ref(3);
onMounted(async () => {
  const width = document.documentElement.clientWidth;
  if (width < 768) {
    columnNumRef.value = 1;
  } else if (width < 992) {
    columnNumRef.value = 2;
  } else {
    columnNumRef.value = 3;
  }

  if (route.query.catteryId) {
    isShowSearch.value = false;
    const cats = await getCatApi({ catteryId: route.query.catteryId });
    catList.value = cats.map((item: any) => ({ ...item, sex: item.sex === "1" ? "公" : "母" }));
  }
});

const imgUrls = computed(() => {
  return (route.query.imgUrls as any)?.split(",");
});
</script>

<style lang="scss" scoped>
@import "@/css/respondMixin";

.catteryImg {
  width: 100px;
  height: 100px;
  margin-left: 15px;
  border-radius: 5px;
  margin-top: 10px;
  @include respond-to("phone") {
    width: 25%;
  }
}

.catteryTitle {
  font-size: 30px;
  @include respond-to("phone") {
    font-size: .6rem;
  }
}

.search-channel-container {
  min-height: 700px;
  background-color: #fff;
  overflow: hidden;

  .main {
    width: 1200px;
    margin: 100px auto 30px;
    display: flex;
    justify-content: space-between;

    @include respond-to("phone") {
      width: 100%;
      margin: 0;
      flex-direction: column;
    }

    .left {
      width: 250px;
      background-color: #f6f6f6;
      text-align: center;

      @include respond-to("phone") {
        height: 2rem;
        width: 100%;
      }

      .item {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        cursor: pointer;

        @include respond-to("phone") {
          display: none;
        }

        &.active {
          color: #fff;
          background-color: #009688;
          @include respond-to("phone") {
            display: block;
          }
        }
      }
    }

    .right {
      background-color: #eee;
      flex-grow: 1;
      margin-left: 30px;

      @include respond-to("phone") {
        margin-left: 0;
      }
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    min-height: 100px;

    @include respond-to("phone") {
      width: 100%;
      grid-template-columns: repeat(2, 1fr);
      padding: 0.1rem;
    }
  }

  .close-btn {
    display: none;
    position: absolute;
    bottom: 20%;
    right: 10%;
    z-index: 9999;
    @include respond-to("phone") {
      display: block;
    }
  }
}
</style>
